<template>
    <div id="container" v-show="showMap"></div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import map from '@/utils/map.js'
export default {
    props:{
        showMap:{
            type:Boolean,
            default:false
        }
    },
    components:{
        
    },
    setup(props,{emit}){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            map:null,
            findData:''
        })

        onMounted( async()=>{
           await map.init() 
           createMap()
        })

        const createMap = ()=>{
            state.map = new BMapGL.Map("container");
            state.map.centerAndZoom(); // 初始化地图,设置中心点坐标和地图级别
            state.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
            state.map.addEventListener('tilesloaded',  ()=> {
                console.log('地图加载完成！');
                emit('loaded',state.map)
            }); 
        }

        // 获取当前位置信息（只获取到城市）
        const getPositionInfo = ()=>{
            return new Promise((resolve,reject)=>{
                let myCity = new BMapGL.LocalCity()
                myCity.get(function (result) {
                    resolve(result)
                }) 
            })        
        }
        // 获取2点的距离，根据经纬度
        const getDistance = (p1,p2)=>{
            // let start=new BMapGL.Point(116.514844,39.921836);
            // let end=new BMapGL.Point(116.308102,40.056057);
            if(p1 && p2){
                let start=new BMapGL.Point(p1[0],p1[1]);
                let end=new BMapGL.Point(p2[0],p2[1]);
                return state.map.getDistance(start ,end);
            }else{
               return ''
            }
        }

        // 获取精准定位
        const getAccurateLocation = async(onComplete)=>{
            console.log("开始获取精准点位.....")
            // 浏览器定位
            const rt = await browserLocation()
            onComplete(rt)
            //ipLocation()
            
        }

        const browserLocation = ()=>{  // 浏览器丁文
            return new Promise((resolve,reject) =>{
                let geoc =new BMapGL.Geocoder();
                let geolocation =new BMapGL.Geolocation();
                geolocation.getCurrentPosition(function(r){
                    console.log("浏览器定位:",r)
                    if(this.getStatus()==BMAP_STATUS_SUCCESS){
                        let pt = r.point;
                        geoc.getLocation(pt,function(rs){
                            //console.log("PPPP:",rs)
                            resolve(rs)
                        });
                    }else{
                        //alert('failed'+this.getStatus());
                        resolve({})
                    }
                },{enableHighAccuracy:true})
            })
        }
        const ipLocation = ()=>{
            var myCity = new BMapGL.LocalCity();
            myCity.get(result =>{
                console.log("ip定位:",result)
            }); 
        }

        return{
            ...toRefs(state),
            getPositionInfo,
            getDistance,
            getAccurateLocation
        }
    }
}
</script>

<style lang="scss" scoped>
    #container{
        width: 100%;
        height: 800px;
    }
</style>